<template>
  <div class="file-get">
    <div @click="handleSelectFile">
      <slot>文件选择</slot>
    </div>
    <input @change="handleChangeFile" type="file" :accept="accept" ref="file" class="input-file" />
  </div>
</template>

<script>
export default {
  props: {
    accept: {
      default: '*/*'
    }
  },

  data () {
    return {

    }
  },

  methods: {
    // 选择文件
    handleSelectFile () {
      this.$refs.file.click()
    },
    // 更改文件
    handleChangeFile (e) {
      let files = e.target.files || []
      if (files.length) {
        this.$emit('change', files[0])
      }
      e.target.value = ''
    }
  }
}
</script>

<style lang="less" scoped>
.file-get {
  padding: 2px;
  .input-file {
    display: none;
  }
}
</style>